<template>
  <div class="box">
    <div class="hander">
      <span class="title">登录bilibili</span>
      <span class="change" @click="handleChange">{{ store.Text }}</span>
      <loginTelephone v-if="store.isShow"></loginTelephone>
      <loginPassword v-if="!store.isShow"></loginPassword>
    </div>
  </div>
</template>
<script lang="ts" setup>
import loginTelephone from './login-telephone.vue'
import loginPassword from './login-password.vue'
import useChangeShowStore from '@/store/login-changeShow';



const store = useChangeShowStore()






const handleChange = () => {
  store.changeShow()
  store.changeText()
}




</script>
<style scoped lang="scss">
.box {
  .hander {


    position: relative;
    background-color: white;
    height: 45px;


    .title,
    .change {
      display: flex;
      height: inherit;
      justify-content: center;
      align-items: center;
      // z-index: 1;
    }

    .title {
      width: 100%;
      font-size: 4vw;

    }

    .change {
      position: absolute;
      top: 0;
      right: 0;
      margin-right: 3vw;
      font-size: 3.2vw;
      // height: inherit;

    }
  }
}
</style>